<template>
  <!-- 选择API -->
  <div class="container">
    <el-form :model="queryParams" ref="stepXzapiFormRef">
      <el-row>
<!--        <el-col :span="7">-->
<!--          <el-form-item label="所属应用：" prop="appId">-->
<!--            <el-select-->
<!--              v-model="queryParams.appId"-->
<!--              placeholder="请选择所属应用"-->
<!--              style="width: 150px"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="item in applicationOptions"-->
<!--                :key="item.appId"-->
<!--                :label="item.appName"-->
<!--                :value="item.appId"-->
<!--              >-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="7">
          <el-form-item label="所属分类：" prop="cateIds">
            <el-cascader
              v-model="queryParams.cateIds"
              :options="fbOptions.classifyList"
              :show-all-levels="false"
              :props="{
                checkStrictly: true,
                value: 'cateId',
                label: 'cateName',
              }"
              style="width: 170px"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="能力编码：" prop="serviceCodeLike">
            <el-input
              v-model="queryParams.serviceCodeLike"
              placeholder="请输入能力编码"
              clearable
              style="width: 130px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="能力名称：" prop="serviceNameLike">
            <el-input
              v-model="queryParams.serviceNameLike"
              placeholder="请输入能力名称"
              clearable
              style="width: 130px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <search-button @click="handleQuery"/>
            <reset-button @click="resetQuery"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      highlight-current-row
      style="margin-top: 10px"
      @row-click="onRowClick"
    >
      <el-table-column label="选择" width="55" align="center">

          <template #default="{ row }">
              <el-radio
                      v-model="chooseVerId"
                      :label="row.apiVerId"
                      @change="handleChooseApi(row)"
              >{{ "" }}</el-radio>
          </template>

<!--        <template #default="scope">-->
<!--          <el-radio-->
<!--            :value="chooseVerId"-->
<!--            :label="scope.row.serviceVerId"-->
<!--            @change="handleChooseApi(scope.row)"-->
<!--          >{{ "" }}-->
<!--          </el-radio-->
<!--          >-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
        label="能力编码"
        prop="serviceCode"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column
        label="能力名称"
        prop="serviceName"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column
        label="所属分类"
        prop="cateName"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column
        label="能力类型"
        prop="serviceType"
        :show-overflow-tooltip="true"
        min-width="100"
      >
        <template #default="scope">
          <span>{{
              selectDictLabel(fbOptions.protocolTypeList, scope.row.serviceType)
            }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="请求路径"
        prop="mockUrl"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column
        label="能力版本"
        prop="serviceMasterVersion"
        :show-overflow-tooltip="true"
        min-width="100"
      >
      <template #default="scope">
        <span>{{ `V${scope.row.serviceMasterVersion}` }}</span>
      </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </div>
  </div>
</template>

<script>
// import {mapActions, mapMutations, mapState} from "vuex";
import {listAllApp} from "@slc/api/slc/system";
import {getApiAndVersion} from "@slc/api/slc/api";
import {searchServiceList} from "@slc/api/slc/inventory";

export default {
  name: "step-xzapi",
  props: {
    fbOptions: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {
      total: 100,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        serviceCodeLike: "",
        serviceNameLike: "",
        cateIds: "",
      },
      tableData: [],
      applicationOptions: [],
      selectId: ''
    };
  },
  async created() {
    listAllApp().then((response) => {
      this.applicationOptions = response.data;
    });
    this.handleQuery();
  },
  // activated() {
  //   this.handleQuery();
  // },
  computed: {
    // ...mapState("service", [
    //   "zhpzInfo",
    //   "classifyList",
    //   "chooseApiInfo",
    //   "chooseSjjInfo",
    //   "serverReleaseType",
    //   "protocolTypeList",
    // ]),
    chooseVerId() {
      return this.selectId || this.fbOptions.flow.moreNodeInfo[this.fbOptions.flow.currentNodeId]?.serviceVerId
    },
    // formData: {
    //   get() {
    //     return this.$store.state.service.pzxxInfo;
    //   },
    //   set(val) {
    //     this.$store.commit("service/setPzxxInfo", val);
    //   },
    // },
  },
  methods: {
    async handleQuery() {
      // 复合编排
      let serviceType = this.fbOptions.flow.selectNode.data.apiType;
      // console.log(this.fbOptions.flow.graph.getNodes())
      const res = await searchServiceList({
        ...this.queryParams,
        serviceStatus: 0, // 默认查询已生效数据
        httpRequestMethod: this.fbOptions.flow.serviceDomain.httpRequestMethod,
        serviceType,
      });

      if (res.code === '200') {
        this.total = res.data.total;
        this.tableData = res.data.list;
      }

    },
    onRowClick(row) {
      this.handleChooseApi(row);
    },
    handleChooseApi(row) {
      this.selectId = row.serviceVerId;
      this.$emit('onChoose', row)
      // this.fbOptions.flow.moreNodeInfo = {
      //   ...this.fbOptions.flow.moreNodeInfo,
      //   [this.fbOptions.flow.currentNodeId]: row,
      // };
    },
    resetQuery() {
      this.resetForm("stepXzapiFormRef");
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 16px;

  .pagination {
    margin-bottom: 16px;
  }
}
</style>
